<template>
  <div>
    <div class="car">
      <div class="car_title">
        <div class="car_titleleft"></div>
        违规车辆监测
      </div>
      <div class="car_content">
        <div class="car_type_wrap">
          <div class="car_type">
            <van-dropdown-menu>
              <van-dropdown-item
                v-model="value1"
                :options="option1"
                @change="changevalue"
              />
            </van-dropdown-menu>
          </div>
          <div class="car_search">
            <input
              type="text"
              placeholder="搜索车牌号..."
              @input="getinputvalue"
              ref="getinputvalue"
            />
            <img
              class="search"
              src="../assets/search.png"
              alt=""
              @click="search()"
            />
          </div>
        </div>
        <div>
          <div class="car_list">
            <Listitem :cararr="cararr" @getindex="getindexnum" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ten } from "@/api/firstapi.js";
import Listitem from "./listitem.vue";
export default {
  data() {
    return {
      value1: 0,
      value2: "a",
      option1: [
        { text: "全部类型", value: 0 },
        { text: "超速", value: 1 },
        { text: "黑名单", value: 2 },
        { text: "违停", value: 3 },
      ],
      cararr: [],
      cararr1: [],
      inputval: "",
      changebgindex1: 0,
    };
  },
  components: {
    Listitem,
  },
  mounted() {
    ten("/data/lun").then((ok) => {
      console.log(ok);
      ok.data.tenarr.map((item) => {
        if (item.value == 1) {
          item.value1 = "超速";
          item.bgclor = "#d8ae55";
          item.cardes = "超速行驶";
        } else if (item.value == 2) {
          item.value1 = "黑名单";
          item.bgclor = "#ee4437";
          item.cardes = "黑名单车辆驶入";
        } else if (item.value == 3) {
          item.value1 = "违停";
          item.bgclor = "#b95ec3";
          item.cardes = "违停";
        }
        return item;
      });
      this.cararr = ok.data.tenarr;
      this.cararr1 = ok.data.tenarr;
    });
  },
  methods: {
    getinputvalue: function (e) {
      // console.log(e);
      this.inputval = e.data;
      this.search();
    },
    changevalue: function (e) {
      this.changebgindex1 = 0;
      if (e == 0) {
        this.cararr = this.cararr1;
      } else {
        let filterarr = this.cararr1.filter((item) => {
          if (e == item.value) {
            return item;
          }
        });
        this.cararr = filterarr;
      }
    },
    search: function () {
      this.changebgindex1 = 0;

      let filterarr = this.cararr1.filter((item) => {
        console.log(item);
        if (item.carnumber.indexOf(this.$refs.getinputvalue.value) > -1) {
          return item;
        }
      });
      this.cararr = filterarr;
    },
    getindexnum: function (i) {
      this.changebgindex1 = i;
    },
  },
};
</script>

<style scoped>
/* 名称 */
.car {
  width: 350px;
  height: 630px;
  background-color: white;
}
.car_title {
  width: 340px;
  height: 35px;
  color: white;
  display: flex;
  padding: 8px 10px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.5);
  align-items: center;
}
.car_titleleft {
  width: 3px;
  height: 18px;
  display: block;
  background-color: #00ffff;
  margin-right: 4px;
}
/* 内容 */
.car_content {
  width: 340px;
  background-color: rgba(0, 0, 0, 0.5);
  margin-top: 10px;
}
.car_type_wrap {
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  color: #939181;
}
.car_type {
  width: 100px;
  /* height: 34px; */
}
.van-dropdown-menu {
  width: 100px;
  height: 34px;
  background-color: white;
}
.car_search {
  width: 200px;
  height: 34px;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 10px;
  border: 1px solid #4e4d48;
}
.car_search > input {
  border: none;
  background-color: transparent;
  padding: 15px;
  box-sizing: border-box;
  width: 170px;
}
.search {
  width: 20px;
  height: 20px;
}
.car_list {
  padding: 0 15px;
  height: 500px;
  overflow-y: scroll;
}
.car_list::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 50px;
}
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background-color: skyblue;
}
.car_list::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
  border-radius: 10px;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.van-popup--top {
  width: 50%;
}
</style>